import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
    SafeAreaView,
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    StatusBar,
    TextInput,
    FlatList,
    ActivityIndicator,
    RefreshControl,
    Modal,
    Dimensions,
    ScrollView,
    Platform,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Toast, DatePickerView } from '@ant-design/react-native';

import { logoutApi, searchMesTaskApi } from './api';
import outlogin from '../../assets/outlogin.png';
import zwsj from '../../assets/zwsj.png';
import { getStatusBarHeight } from '../../utils/statusBarHeight';
import zwtp from '../../assets/zwtp.png';

interface TaskScreenProps {
    onLogout: () => void;
    navigation?: any;
}

interface TaskItem {
    id: string;
    product_name?: string;
    aps_device_num?: string;
    process_name?: string;
    quantity?: number;
    progress?: number;
    aps_start?: string;
    aps_end?: string;
    [key: string]: any;
}

// 格式化日期时间为 "YYYY-MM-DD HH:mm:ss" 格式
const formatDateTime = (date: Date): string => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 获取今天的0点和24点
const getTodayStart = (): Date => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return today;
};

const getTodayEnd = (): Date => {
    const today = new Date();
    today.setHours(23, 59, 59, 999);
    return today;
};

const TaskScreen: React.FC<TaskScreenProps> = ({ onLogout, navigation }) => {
    const [productEncode, setProductEncode] = useState('');
    const [taskList, setTaskList] = useState<TaskItem[]>([]);
    const [loading, setLoading] = useState(false);
    const [refreshing, setRefreshing] = useState(false);
    const [loadingMore, setLoadingMore] = useState(false);
    const [hasMore, setHasMore] = useState(true);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const lastSearchKeywordRef = useRef('');
    const isRefreshingRef = useRef(false);
    const [imagePreviewVisible, setImagePreviewVisible] = useState(false);
    const [previewImageUrl, setPreviewImageUrl] = useState('');
    const [searchStart, setSearchStart] = useState<Date>(getTodayStart());
    const [searchEnd, setSearchEnd] = useState<Date>(getTodayEnd());
    const [timePickerModalVisible, setTimePickerModalVisible] = useState(false);
    const [tempSearchStart, setTempSearchStart] = useState<Date>(getTodayStart());
    const [tempSearchEnd, setTempSearchEnd] = useState<Date>(getTodayEnd());
    const [startDatePickerVisible, setStartDatePickerVisible] = useState(false);
    const [endDatePickerVisible, setEndDatePickerVisible] = useState(false);

    const handleLogout = useCallback(async () => {
        try {
            const res = await logoutApi();
            await AsyncStorage.removeItem('token');
            Toast.success(res.msg || '已安全退出登录', 1);
            setTimeout(() => {
                onLogout();
            }, 500);
        } catch (error: any) {
            console.log('任务页面退出登录异常:', error);
            await AsyncStorage.removeItem('token');
            Toast.fail(error?.message || '网络错误，但已清除本地登录状态', 1);
            setTimeout(() => {
                onLogout();
            }, 500);
        }
    }, [onLogout]);

    const fetchTaskList = useCallback(
        async ({
            page = 1,
            isRefresh = false,
            keyword,
            startTime,
            endTime,
        }: {
            page?: number;
            isRefresh?: boolean;
            keyword?: string;
            startTime?: Date;
            endTime?: Date;
        } = {}) => {
            const searchKeyword = (keyword ?? lastSearchKeywordRef.current ?? '').trim();
            const start = startTime ?? searchStart;
            const end = endTime ?? searchEnd;
            const params = {
                current: page,
                size: pageSize,
                schedule_state: true,
                search_start: formatDateTime(start),
                search_end: formatDateTime(end),
                ...(searchKeyword ? { product_encode: searchKeyword } : {}),
            };

            if (page === 1) {
                if (isRefresh) {
                    setRefreshing(true);
                } else {
                    setLoading(true);
                }
            } else {
                setLoadingMore(true);
            }

            console.log('任务页面查询参数:', params);

            try {
                const res = await searchMesTaskApi(params);
                console.log('任务页面接口返回值:', res);

                const data = res?.data || {};
                const records: TaskItem[] = data.records || [];
                const total: number = data.total ?? records.length ?? 0;
                const size: number = data.size ?? params.size ?? 10;
                const totalPages = size > 0 ? Math.ceil(total / size) : 1;

                setPageSize(size);
                setCurrentPage(page);
                setHasMore(page < totalPages);

                if (page === 1) {
                    setTaskList(records);
                } else {
                    setTaskList(prev => [...prev, ...records]);
                }
            } catch (error: any) {
                console.log('任务页面接口调用异常:', error);
                if (page === 1) {
                    setTaskList([]);
                }
                Toast.fail(error?.message || '获取任务列表失败', 1);
            } finally {
                setLoading(false);
                setRefreshing(false);
                setLoadingMore(false);
            }
        },
        [pageSize, searchStart, searchEnd],
    );

    const handleSearch = useCallback(() => {
        lastSearchKeywordRef.current = productEncode;
        fetchTaskList({ page: 1, keyword: productEncode });
    }, [fetchTaskList, productEncode]);

    const handleRefresh = useCallback(() => {
        const todayStart = getTodayStart();
        const todayEnd = getTodayEnd();
        isRefreshingRef.current = true;
        setProductEncode('');
        setSearchStart(todayStart);
        setSearchEnd(todayEnd);
        lastSearchKeywordRef.current = '';
        fetchTaskList({ page: 1, isRefresh: true, startTime: todayStart, endTime: todayEnd }).finally(() => {
            isRefreshingRef.current = false;
        });
    }, [fetchTaskList]);

    const handleLoadMore = useCallback(() => {
        if (loadingMore || !hasMore) return;
        fetchTaskList({ page: currentPage + 1 });
    }, [fetchTaskList, loadingMore, hasMore, currentPage]);

    const handleTaskPress = useCallback(
        (task: TaskItem) => {
            navigation?.navigate?.('TaskDetail', { task });
        },
        [navigation],
    );

    const handleImagePreview = useCallback((imageUrl?: string) => {
        setPreviewImageUrl(imageUrl || '');
        setImagePreviewVisible(true);
    }, []);

    const closeImagePreview = useCallback(() => {
        setImagePreviewVisible(false);
        setPreviewImageUrl('');
    }, []);

    const renderTaskItem = useCallback(
        ({ item }: { item: TaskItem }) => (
            <TouchableOpacity style={styles.card} onPress={() => handleTaskPress(item)} activeOpacity={0.8}>
                <View style={styles.cardHeader}>
                    <Text style={styles.cardLabel}>产品名称：</Text>
                    <Text style={styles.cardTitle} numberOfLines={2} ellipsizeMode="tail">
                        {item.product_name || '-'}
                    </Text>
                </View>
                <View style={styles.cardHeader}>
                    <Text style={styles.cardLabel}>设备编号：</Text>
                    <Text style={styles.cardTitle} numberOfLines={2} ellipsizeMode="tail">
                        {item.aps_device_num || '-'}
                    </Text>
                </View>
                <View style={styles.cardContent}>
                    <TouchableOpacity
                        onPress={() => handleImagePreview(item.product_link)}
                        activeOpacity={0.8}
                        style={styles.cardImageWrapper}
                    >
                        <Image
                            source={item.product_link ? { uri: item.product_link } : zwtp}
                            style={styles.cardImage}
                            resizeMode="cover"
                        />
                    </TouchableOpacity>
                    <View style={styles.cardInfo}>
                        <View style={styles.cardRow}>
                            <Text style={styles.cardLabel}>工艺名称：</Text>
                            <Text style={styles.cardValue} numberOfLines={1} ellipsizeMode="tail">
                                {item.process_name || '-'}
                            </Text>
                        </View>
                        <View style={styles.cardRow}>
                            <Text style={styles.cardLabel}>数量：</Text>
                            <Text style={styles.cardHighlight}>{item.quantity ?? 0}</Text>
                        </View>
                        <View style={styles.cardRow}>
                            <Text style={styles.cardLabel}>开始时间：</Text>
                            <Text style={styles.cardValue} numberOfLines={1} ellipsizeMode="tail">
                                {item.aps_start || '-'}
                            </Text>
                        </View>
                        <View style={styles.cardRow}>
                            <Text style={styles.cardLabel}>结束时间：</Text>
                            <Text style={styles.cardValue} numberOfLines={1} ellipsizeMode="tail">
                                {item.aps_end || '-'}
                            </Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        ),
        [handleTaskPress],
    );

    const listEmptyComponent = useMemo(() => {
        if (loading) {
            return (
                <View style={styles.emptyContainer}>
                    <ActivityIndicator size="small" color="#007AFF" />
                    <Text style={styles.emptyText}>加载中...</Text>
                </View>
            );
        }

        return (
            <View style={styles.emptyContainer}>
                <Image source={zwsj} style={styles.emptyImage} />
                <Text style={styles.emptyText}>暂无任务数据</Text>
            </View>
        );
    }, [loading]);

    const listFooterComponent = useMemo(() => {
        if (!taskList.length) return null;
        if (loadingMore) {
            return (
                <View style={styles.footerContainer}>
                    <ActivityIndicator size="small" color="#007AFF" />
                    <Text style={styles.footerText}>加载中...</Text>
                </View>
            );
        }

        if (!hasMore) {
            return (
                <View style={styles.footerContainer}>
                    <Text style={styles.footerText}>没有更多数据了</Text>
                </View>
            );
        }

        return null;
    }, [taskList.length, loadingMore, hasMore]);

    useEffect(() => {
        if (!isRefreshingRef.current) {
            fetchTaskList({ page: 1 });
        }
    }, [fetchTaskList]);

    return (
        <SafeAreaView style={styles.container}>
            <StatusBar
                barStyle="dark-content"
                backgroundColor="#fff"
                translucent={true}
            />
            <View style={styles.headerContainer}>
                <View style={styles.header}>
                    <Text style={styles.title}>任务</Text>
                    <TouchableOpacity style={styles.headerRightBtn} onPress={handleLogout}>
                        <Image source={outlogin} style={styles.headerRightIcon} />
                    </TouchableOpacity>
                </View>
            </View>
            <View style={styles.content}>
                <View style={styles.searchContainer}>
                    <View style={styles.searchRow}>
                        <View style={styles.inputContainer}>
                            <TextInput
                                style={styles.searchInput}
                                placeholder="请输入产品编码"
                                placeholderTextColor="#999"
                                value={productEncode}
                                onChangeText={setProductEncode}
                                returnKeyType="search"
                                onSubmitEditing={handleSearch}
                            />
                            {productEncode.length > 0 && (
                                <TouchableOpacity style={styles.clearButton} onPress={() => setProductEncode('')}>
                                    <Text style={styles.clearButtonText}>×</Text>
                                </TouchableOpacity>
                            )}
                        </View>
                        <TouchableOpacity
                            style={styles.timeButton}
                            onPress={() => {
                                setTempSearchStart(searchStart);
                                setTempSearchEnd(searchEnd);
                                setTimePickerModalVisible(true);
                            }}
                            activeOpacity={0.8}
                        >
                            <Text style={styles.timeButtonText}>时间</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.searchButton} onPress={handleSearch}>
                            <Text style={styles.searchButtonText}>搜索</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <Modal
                    visible={timePickerModalVisible}
                    transparent={true}
                    animationType="slide"
                    onRequestClose={() => {
                        setTimePickerModalVisible(false);
                        setTempSearchStart(searchStart);
                        setTempSearchEnd(searchEnd);
                    }}
                    presentationStyle={Platform.OS === 'ios' ? 'overFullScreen' : undefined}
                >
                    <View style={styles.datePickerModal}>
                        <View style={styles.datePickerModalContent}>
                            <View style={styles.datePickerModalHeader}>
                                <TouchableOpacity
                                    onPress={() => {
                                        setTimePickerModalVisible(false);
                                        setTempSearchStart(searchStart);
                                        setTempSearchEnd(searchEnd);
                                    }}
                                    style={styles.datePickerModalButton}
                                >
                                    <Text style={styles.datePickerModalCancel}>取消</Text>
                                </TouchableOpacity>
                                <Text style={styles.datePickerModalTitle}>选择时间范围</Text>
                                <TouchableOpacity
                                    onPress={() => {
                                        setSearchStart(tempSearchStart);
                                        setSearchEnd(tempSearchEnd);
                                        setTimePickerModalVisible(false);
                                        handleSearch();
                                    }}
                                    style={styles.datePickerModalButton}
                                >
                                    <Text style={styles.datePickerModalConfirm}>确定</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.timeInputContainer}>
                                <View style={styles.timeInputRow}>
                                    <Text style={styles.timeInputLabel}>开始时间</Text>
                                    <TouchableOpacity
                                        style={styles.timeInput}
                                        onPress={() => {
                                            // iOS兼容：先关闭时间范围选择Modal，避免嵌套
                                            setTimePickerModalVisible(false);
                                            // 延迟打开开始时间选择器，确保前一个Modal完全关闭
                                            setTimeout(() => {
                                                setStartDatePickerVisible(true);
                                            }, Platform.OS === 'ios' ? 100 : 50);
                                        }}
                                        activeOpacity={0.8}
                                    >
                                        <Text style={styles.timeInputText}>
                                            {formatDateTime(tempSearchStart).substring(0, 16)}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={styles.timeInputRow}>
                                    <Text style={styles.timeInputLabel}>结束时间</Text>
                                    <TouchableOpacity
                                        style={styles.timeInput}
                                        onPress={() => {
                                            // iOS兼容：先关闭时间范围选择Modal，避免嵌套
                                            setTimePickerModalVisible(false);
                                            // 延迟打开结束时间选择器，确保前一个Modal完全关闭
                                            setTimeout(() => {
                                                setEndDatePickerVisible(true);
                                            }, Platform.OS === 'ios' ? 100 : 50);
                                        }}
                                        activeOpacity={0.8}
                                    >
                                        <Text style={styles.timeInputText}>
                                            {formatDateTime(tempSearchEnd).substring(0, 16)}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>
                <Modal
                    visible={startDatePickerVisible}
                    transparent={true}
                    animationType="slide"
                    onRequestClose={() => {
                        setStartDatePickerVisible(false);
                        // 关闭后重新打开时间范围选择Modal
                        setTimeout(() => {
                            setTimePickerModalVisible(true);
                        }, Platform.OS === 'ios' ? 100 : 50);
                    }}
                    presentationStyle={Platform.OS === 'ios' ? 'overFullScreen' : undefined}
                >
                    <SafeAreaView style={styles.datePickerModal}>
                        <View style={styles.datePickerModalContent}>
                            <View style={styles.datePickerModalHeader}>
                                <TouchableOpacity
                                    onPress={() => {
                                        setStartDatePickerVisible(false);
                                        // 关闭后重新打开时间范围选择Modal
                                        setTimeout(() => {
                                            setTimePickerModalVisible(true);
                                        }, Platform.OS === 'ios' ? 100 : 50);
                                    }}
                                    style={styles.datePickerModalButton}
                                >
                                    <Text style={styles.datePickerModalCancel}>取消</Text>
                                </TouchableOpacity>
                                <Text style={styles.datePickerModalTitle}>选择开始时间</Text>
                                <TouchableOpacity
                                    onPress={() => {
                                        // 确定时保存日期并关闭
                                        setStartDatePickerVisible(false);
                                        // 关闭后重新打开时间范围选择Modal
                                        setTimeout(() => {
                                            setTimePickerModalVisible(true);
                                        }, Platform.OS === 'ios' ? 100 : 50);
                                    }}
                                    style={styles.datePickerModalButton}
                                >
                                    <Text style={styles.datePickerModalConfirm}>确定</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.datePickerViewContainer}>
                                <DatePickerView
                                    value={tempSearchStart}
                                    mode="date"
                                    precision="second"
                                    minDate={new Date(2020, 0, 1)}
                                    maxDate={new Date(2100, 11, 31)}
                                    onChange={(date: Date) => {
                                        setTempSearchStart(date);
                                    }}
                                    itemStyle={styles.datePickerItemStyle}
                                />
                            </View>
                        </View>
                    </SafeAreaView>
                </Modal>
                <Modal
                    visible={endDatePickerVisible}
                    transparent={true}
                    animationType="slide"
                    onRequestClose={() => {
                        setEndDatePickerVisible(false);
                        // 关闭后重新打开时间范围选择Modal
                        setTimeout(() => {
                            setTimePickerModalVisible(true);
                        }, Platform.OS === 'ios' ? 100 : 50);
                    }}
                    presentationStyle={Platform.OS === 'ios' ? 'overFullScreen' : undefined}
                >
                    <SafeAreaView style={styles.datePickerModal}>
                        <View style={styles.datePickerModalContent}>
                            <View style={styles.datePickerModalHeader}>
                                <TouchableOpacity
                                    onPress={() => {
                                        setEndDatePickerVisible(false);
                                        // 关闭后重新打开时间范围选择Modal
                                        setTimeout(() => {
                                            setTimePickerModalVisible(true);
                                        }, Platform.OS === 'ios' ? 100 : 50);
                                    }}
                                    style={styles.datePickerModalButton}
                                >
                                    <Text style={styles.datePickerModalCancel}>取消</Text>
                                </TouchableOpacity>
                                <Text style={styles.datePickerModalTitle}>选择结束时间</Text>
                                <TouchableOpacity
                                    onPress={() => {
                                        // 确定时保存日期并关闭
                                        setEndDatePickerVisible(false);
                                        // 关闭后重新打开时间范围选择Modal
                                        setTimeout(() => {
                                            setTimePickerModalVisible(true);
                                        }, Platform.OS === 'ios' ? 100 : 50);
                                    }}
                                    style={styles.datePickerModalButton}
                                >
                                    <Text style={styles.datePickerModalConfirm}>确定</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.datePickerViewContainer}>
                                <DatePickerView
                                    value={tempSearchEnd}
                                    mode="date"
                                    precision="second"
                                    minDate={new Date(2020, 0, 1)}
                                    maxDate={new Date(2100, 11, 31)}
                                    onChange={(date: Date) => {
                                        setTempSearchEnd(date);
                                    }}
                                    itemStyle={styles.datePickerItemStyle}
                                />
                            </View>
                        </View>
                    </SafeAreaView>
                </Modal>
                <FlatList
                    data={taskList}
                    keyExtractor={(item, index) => item.id || `${index}`}
                    renderItem={renderTaskItem}
                    onEndReachedThreshold={0.2}
                    onEndReached={handleLoadMore}
                    ListEmptyComponent={listEmptyComponent}
                    ListFooterComponent={listFooterComponent}
                    refreshControl={
                        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['#007AFF']} />
                    }
                    contentContainerStyle={taskList.length === 0 ? styles.listEmptyContent : undefined}
                />
            </View>
            <Modal
                visible={imagePreviewVisible}
                transparent={true}
                animationType="fade"
                onRequestClose={closeImagePreview}
            >
                <View style={styles.modalOverlay}>
                    <TouchableOpacity
                        style={styles.modalBackground}
                        activeOpacity={1}
                        onPress={closeImagePreview}
                    >
                        <TouchableOpacity
                            style={styles.imageContainer}
                            activeOpacity={1}
                            onPress={closeImagePreview}
                        >
                            <Image
                                source={previewImageUrl ? { uri: previewImageUrl } : zwtp}
                                style={styles.previewImage}
                                resizeMode="contain"
                            />
                        </TouchableOpacity>
                    </TouchableOpacity>
                </View>
            </Modal>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    headerContainer: {
        backgroundColor: '#fff',
        paddingTop: getStatusBarHeight(),
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 50,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        backgroundColor: '#fff',
        position: 'relative',
        zIndex: 10,
    },
    headerRightBtn: {
        position: 'absolute',
        right: 16,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 8,
    },
    headerRightIcon: {
        width: 24,
        height: 24,
        tintColor: '#333',
    },
    title: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#333',
    },
    content: {
        flex: 1,
        padding: 10,
    },
    searchContainer: {
        marginBottom: 10,
        width: '100%',
    },
    searchRow: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    inputContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
    },
    searchInput: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 6,
        padding: 10,
        paddingRight: 35,
        backgroundColor: '#fff',
        height: 44,
        fontSize: 14,
        textAlignVertical: 'center',
    },
    clearButton: {
        position: 'absolute',
        right: 8,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        padding: 8,
    },
    clearButtonText: {
        color: '#999',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
        width: 20,
        height: 20,
        lineHeight: 20,
    },
    searchButton: {
        backgroundColor: '#007AFF',
        paddingHorizontal: 18,
        height: 44,
        borderRadius: 6,
        justifyContent: 'center',
        marginLeft: 8,
    },
    searchButtonText: {
        fontSize: 14,
        color: '#fff',
        fontWeight: 'bold',
        textAlign: 'center',
    },
    timeButton: {
        backgroundColor: '#007AFF',
        paddingHorizontal: 18,
        height: 44,
        borderRadius: 6,
        justifyContent: 'center',
        marginLeft: 8,
    },
    timeButtonText: {
        fontSize: 14,
        color: '#fff',
        fontWeight: 'bold',
        textAlign: 'center',
    },
    card: {
        backgroundColor: '#fff',
        borderRadius: 12,
        padding: 16,
        marginBottom: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.05,
        shadowRadius: 4,
        elevation: 2,
    },
    cardHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 4,
    },
    cardTitle: {
        fontSize: 14,
        color: '#333',
        fontWeight: 'bold',
        flex: 1,
    },
    cardContent: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    cardImageWrapper: {
        marginRight: 12,
    },
    cardImage: {
        width: 60,
        height: 60,
        borderRadius: 4,
    },
    cardInfo: {
        flex: 1,
    },
    cardRow: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 4,
    },
    cardLabel: {
        fontSize: 14,
        color: '#333',
        width: 80,
        fontWeight: 'bold',
    },
    cardValue: {
        fontSize: 14,
        color: '#333',
        flex: 1,
    },
    cardHighlight: {
        fontSize: 14,
        color: '#333',
        flex: 1,
    },
    emptyContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 60,
    },
    emptyText: {
        fontSize: 16,
        color: '#888',
        marginTop: 12,
    },
    emptyImage: {
        width: 160,
        height: 160,
    },
    footerContainer: {
        paddingVertical: 16,
        justifyContent: 'center',
        alignItems: 'center',
    },
    footerText: {
        fontSize: 14,
        color: '#999',
        marginTop: 8,
    },
    listEmptyContent: {
        flexGrow: 1,
    },
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
    imageContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
    previewImage: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
    datePickerModal: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end',
    },
    datePickerModalContent: {
        backgroundColor: '#fff',
        maxHeight: Dimensions.get('window').height * 0.8,
    },
    datePickerModalHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    datePickerModalButton: {
        padding: 8,
        minWidth: 60,
    },
    datePickerModalCancel: {
        fontSize: 16,
        color: '#999',
    },
    datePickerModalTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
    },
    datePickerModalConfirm: {
        fontSize: 16,
        color: '#007AFF',
        fontWeight: 'bold',
    },
    timeInputContainer: {
        padding: 16,
    },
    timeInputRow: {
        marginBottom: 16,
    },
    timeInputLabel: {
        fontSize: 14,
        color: '#333',
        fontWeight: 'bold',
        marginBottom: 8,
    },
    timeInput: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 12,
        height: 44,
        justifyContent: 'center',
    },
    timeInputText: {
        fontSize: 14,
        color: '#333',
    },
    datePickerViewContainer: {
        height: 240,
        width: '100%',
    },
    datePickerItemStyle: {
        fontSize: 16,
    },
});

export default TaskScreen;
